Youtube教學連結:金魚都能懂的網頁切版 : 圖文滿版區塊
畫面呈現
HTML結構
結構說明:
banner
:整個版面container
:讓內容得以縮排的div<small>
:讓文本的字體小一號MDN
CSS結構
縮排技巧
設定外層的寬度,並利用margin:auto
的技巧置中,可以使得內容在較大版面上,左右留有空間。
.container{
width: 1200px;
margin:auto;
}
圖片+顏色背景
background
: 可設定多種背景,用,隔開。center center / 100% 100%
: 分別只background-position
與background-size
屬性。
linear-gradient()
:115deg
: 設定漸層角度,0deg表示從下到上。#7bf, 50%, transparent 50%
: 利用兩個顏色皆為50%的方式,產生solid的畫面。
.banner {
width: 100%;
height: 100vh;
background-color: #ccc;
background: linear-gradient(115deg, #7bf, 50%, transparent 50%) center
center / 100% 100%,
url("https://picsum.photos/1200/600?random=10") right center / auto 100%;
}